<template>
  <div class="nav-wrap">
    <div
      v-for="(item, index) in datas"
      :key="index" class="item"
      :selected="selectedNav === index"
      @click="onNavClick(index)"
    >
      {{ item.name }}
    </div>
    <div class="scrollbar" :style="{ top: `${8 + selectedNav * 40}px` }" />
  </div>
</template>

<script setup>
import { ref } from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  datas: {
    type: Array,
    default: () => [],
  },
});

const selectedNav = ref(0);

const onNavClick = (index) => {
  selectedNav.value = index;
  const click = props.datas[index].click;
  if (click && click instanceof Function) {
    click();
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>